<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>滚动公告栏</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/v2/css/base/coach.css">
    <style>

        .marquee {
            width: 100%;
            align-items: center;
            color: #3A3A3A;
            background-color: #b3effe;
            box-sizing: border-box;
            text-align: center;
        }

        .layui-container {
            width: 100%;
            padding: 0 10px;
        }

        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a, img {
            border: 0;
            vertical-align: middle;
        }


        .noticTipTxt {
            color: #ff7300;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin: 0 0 0 40px;
        }

        .noticTipTxt li {
            height: 30px;
        }

        .noticTipTxt a:hover {
            color: #ff7300;
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="marquee">
            <ul id="jsfoot02" class="noticTipTxt">
                <li>
                    <a href="#" target="_blank" class="roll-text">
                        Hao-Tool Design By @polices on http://lymtr.cn
                    </a>
                    <img src="/static/v1/img/hot001.gif" width="22" height="11" class="hit-tip"/></li>
            </ul>
        </div>
    </div>
</div>
<div class="truck-wrapper" id="show-loading">
    <div class="truck">
        <div class="truck-container">
            <img src="http://i.lymtr.cn/cmhi/logo/3.2.png" width="100%">
        </div>
        <div class="glases"></div>
        <div class="bonet"></div>
        <div class="base"></div>
        <div class="base-aux"></div>
        <div class="wheel-back"></div>
        <div class="wheel-front"></div>
        <div class="smoke"></div>
    </div>
</div>

<script src="/static/layui/layui.js"></script>

<script type="text/javascript" src="/static/v1/js/scrolltext.js"></script>
<script type="text/javascript" src="/static/v3/js/common/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/v3/js/common/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/v3/js/websocket/sockjs.min.js"></script>
<script type="text/javascript" src="/static/v3/js/websocket/clipboard.min.js"></script>
<script type="text/javascript" src="/static/v3/js/websocket/stomp.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'laytpl', 'util', 'element'], function () {
        var $ = layui.$;
        var socket = new SockJS("/sock");
        var stompClient = Stomp.over(socket);


        function rollNotice(noticeMsg) {
            $(".hit-tip").show();
            var rollText = $(".roll-text");
            rollText.html(noticeMsg);
            var scrollup = new ScrollText("jsfoot02");
            scrollup.LineHeight = 30;        //单排文字滚动的高度
            scrollup.Amount = 1;            //注意:子模块(LineHeight)一定要能整除Amount.
            scrollup.Delay = 20;           //延时
            scrollup.Start();             //文字自动滚动
            scrollup.Direction = "up";   //默认设置为文字向上滚动
            scrollup.Stop();
            setTimeout(function () {
                $(".hit-tip").show();
            }, 1000 * 60 * 10);
        }

        //连接服务器
        stompClient.connect({}, function (frame) {
            rollNotice("连接建立成功,请点击按键接收日志...");
            //连接成功后,为logControl绑定事件
            var logCatalinaJQ = $("#logCatalina");
            //点击订阅或取消订阅日志
            logCatalinaJQ.on("click", function () {
                var _this = this;
                var iconJQ = $(_this).find("i.glyphicon");

                var hasStartClass = iconJQ.hasClass("glyphicon-play");
                if (hasStartClass) {
                    //订阅日志
                    _this.subscription = subscribeLog(stompClient);
                } else {
                    //取消订阅日志
                    unsubscribeLog(_this.subscription);
                }
            });

        }, function (error) {
            rollNotice('连接失败【' + error + '】');
        });


        function subscribeLog(stompClient) {

            //公共订阅,服务器可以通过该地址发送信息给所有用户
            var subscription = stompClient.subscribe("/topic/notice", function (res) {
                if (res && res.body) {
                    var resBody = res.body;
                    console.log(resBody);
                    rollNotice(resBody);

                }
            });
            return subscription;
        }

        //取消订阅日志信息
        function unsubscribeLog(subscription) {
            subscription.unsubscribe();
        }

        setTimeout(function () {
            subscribeLog(stompClient);
        }, 10000);


    });
</script>
</body>
</html>
